<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
	window.onload=function(){
		//通过编号id拿到对象
		/*var div=document.getElementById("d123");
		alert(div.innerHTML);
		div.style.backgroundColor='#777';*/

		//通过名字name拿到对象
		/*var divs=document.getElementsByName("u");
		for(var i=0;i<divs.length;i++){
			divs[i].style.backgroundColor='green';
			divs[i].style.height='300px';
		}*/

		//通过类名拿到对象
		/*var divs=document.getElementsByClassName("s");
		for(var i=0;i<divs.length;i++){
			divs[i].style.backgroundColor='green';
			divs[i].style.height='300px';
			divs[i].style.width='300px';
			divs[i].style.marginTop='5px';
		}*/

		//通过标签拿到对象
		/*var divs=document.getElementsByTagName("div");
		for(var i=0;i<divs.length;i++){
			divs[i].style.backgroundColor='green';
			divs[i].style.height='300px';
			divs[i].style.width='300px';
			divs[i].style.marginTop='5px';
		}*/

		
		

	}
	
</script>
</head>
<body id="test">

<div id="d123" name="u" class="s">ooo</div>

<div id="d124" name="u" class="s">ooo</div>
<div id="d125" name="u" class="s">ooo</div>
<div id="d126" name="u" class="s">ooo</div>


<!-- <ol id="d127" name="u" class="s">
	<li>u1</li>
	<li>u2</li>
	<li id="v">u3</li>
	<li>u4</li>
	<li>u5</li>
	<li>u6</li>
</ol>

<input type="button" onclick="change(curTarget.parentNode);" value="父节点">
<input type="button" onclick="change(curTarget.parentNode.firstChild.nextSibling);" value="第一个节点">
<input type="button" onclick="change(curTarget.previousSibling.previousSibling);" value="上一个节点">
<input type="button" onclick="change(curTarget.nextSibling.nextSibling);" value="下一个节点">
<input type="button" onclick="change(curTarget.parentNode.lastChild.previousSibling);" value="最后一个节点">
<script type="text/javascript">
/*var curTarget=document.getElementById("v");
//方法
var change=function(target){
	alert(target.innerHTML);
}*/
</script> -->

<!-- <form id="d" action="" method="get">
	<input name="user" type="text"><br>
	<input name="pass" type="password"><br>
	<select id="color" name="color">
		<option value="red">红色</option>
		<option value="blue">蓝色</option>
	</select><br>
	
	<input type="button" onclick="alert(document.getElementById('d').elements[0].value);" value="第一个"/>
	<input type="button" onclick="alert(document.getElementById('d').elements['pass'].value);" value="第二个"/>
	<input type="button" onclick="alert(document.getElementById('d').color.value);" value="第三个"/>
	
	<input type="button" onclick="alert(document.getElementById('color').selectedIndex);" value="下拉框中选的第几个"/>
	<input type="button" onclick="alert(document.getElementById('color').options[document.getElementById('color').selectedIndex].text);" value="下拉框中选的第几个的文本"/>
</form> -->

<script type="text/javascript">

	window.onload=function(){
	//创建表格对象
	var a=document.createElement("table");
	a.id="t1";
	a.border=1;//设置边框为1
	var caption=a.createCaption();
	caption.innerHTML="表格标题";

	//为表格创建行，插入5行
	for(var i=0;i<5;i++){

		//插入行
		var tr=a.insertRow(i);

		//为行插入7列
		for(var j=0;j<7;j++){
			//创建单元格
			var td=tr.insertCell(j);
			//设置每一个单元格的内容
			td.innerHTML="单元格的内容"+i+" "+j;
			//绑定事件
			td.onclick=function(){
				if(window.confirm("确定要删除么？")){
					this.remove();//通用的文档元素删除方式
				}
				
			};
		}
	}

	//将表格添加到body里
	document.getElementById("test").appendChild(a);
	//document.getElementById("tr1").appendChild(a);

	document.getElementById("t1").rows[0].deleteCell(6);//表格特有的删除元素方式
	document.getElementById("t1").deleteRow(3);//表格特有的删除元素方式
	};
</script>

<div id="tr1"></div>
</body>
</html>